<template>
<div class="iconDiv" @click="clickCollect">
    <span >
      <img v-if="isCollect" src="/static/images/goods/collect-active.png">
      <img v-else src="/static/images/goods/collect.png">
    </span>
    <b>{{collectNum}}</b>
</div>
</template>

<script>
  export default {
    props: {
      isCollect: { 
        type: Boolean,
      },
      ids: { 
        type: Number,
      },
      collectNum: { //收藏数目
        type: Number,
      },
    },
    methods: {
      clickCollect(){
        if(!this.isCollect){
          this.isCollect = true
          this.$http.get(`products/photoFav/${this.ids}`).then((res)=>{
            this.collectNum = res.data.data
            this.wxAlert("收藏成功")
           })
        }else{
          this.isCollect = false
          this.$http.get(`products/photoFav/${this.ids}`).then((res)=>{
            this.collectNum = res.data.data
            this.wxAlert("取消成功")
          })
          
        }
      },
      wxAlert(txt){
        wx.showToast({
          title: txt,
          icon: "none",
          duration: 2000,
          mask: true
        })
      }
    },
  }
</script>

<style scoped>
.iconDiv{
  width: 120rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background: #000;
  position: absolute;
  top: 16rpx;
  right: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 90;
}
.iconDiv span{
  display: block;
  width: 36rpx;
  height: 36rpx;
}
.iconDiv span img{
  width: 100%;
  height: 100%;
  display: block;
}
.iconDiv b{
  font-size: 26rpx;
  color: #fff;
  margin-left: 10rpx;
  font-weight: normal;
}

</style>